<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="220px">
      <div class="box">
        <p class="title">客户信息</p>
        <div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="业务担当姓名:">
                <span>{{ form.businessPersonName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户紧急联系人姓名:">
                <span>{{ form.contactPersonName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出租方:">
                <span>{{ form.lessorName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="承租方:">
                <span>{{ form.leaseeName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="box" v-if="(form.rentType == 2 || form.rentType == 4) && form.immunityAuditType == 1">
        <p class="title">买受人信息</p>
        <div style="margin-left: 30px" v-if="form.supplementEmptor.emptorType == '1'">
          <el-row>
            <el-col :span="6">
              <el-form-item label="买受人:">
                <span>{{ form.supplementEmptor.buyerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型:">
                <span>{{ form.supplementEmptor.buyerTypeStr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号码/护照号码:">
                <span>{{ form.supplementEmptor.idCardNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="通讯地址:">
                <span>{{ form.supplementEmptor.contactAddr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话:">
                <span>{{ form.supplementEmptor.contactMobile }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件:">
                <ImageCommon :up-type="1" info="选择附件" :limit="1" v-model="form.supplementEmptor.accessory" :disabled="true"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="margin-left: 30px" v-else>
          <el-row>
            <el-col :span="6">
              <el-form-item label="买受人:">
                <span>{{ form.supplementEmptor.buyerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型:">
                <span>{{ form.supplementEmptor.buyerTypeStr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="统一社会信用代码:">
                <span>{{ form.supplementEmptor.creditCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="法定代表人/负责人:">
                <span>{{ form.supplementEmptor.corp }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="通讯地址:">
                <span>{{ form.supplementEmptor.contactAddr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人:">
                <span>{{ form.supplementEmptor.contactPerson }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系电话:">
                <span>{{ form.supplementEmptor.contactMobile }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱:">
                <span>{{ form.supplementEmptor.email }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="传真:">
                <span>{{ form.supplementEmptor.fax }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件:">
                <ImageCommon :up-type="1" info="选择附件" :limit="1" v-model="form.supplementEmptor.accessory" :disabled="true"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="box" v-if="form.immunityAuditType == '1'">
        <p class="title">担保人信息</p>
        <div>
          <el-row>
            <el-col :span="6">
              <p style="font-style: 13px; margin-bottom: 10px; color: #606266">个人担保：</p>
            </el-col>
          </el-row>
          <table-page :dataList="form.supplementSuretyPersonalList" border :total="total">
            <!-- 普通列插槽 -->
            <template slot="tableCol">
              <el-table-column label="姓名" align="center" prop="suretyName" />
              <el-table-column label="身份证号码" align="center" prop="idCardNo" />
              <el-table-column label="联系电话" align="center" prop="contactMobile" />
              <el-table-column label="联系地址" align="center" prop="contactAddr" />
              <el-table-column label="与客户关系" align="center" prop="relation" />
              <el-table-column label="传真" align="center" prop="fax" />
            </template>
          </table-page>
          <el-row>
            <el-col :span="6">
              <p style="font-style: 13px; margin-bottom: 10px; color: #606266">企业担保：</p>
            </el-col>
          </el-row>
          <table-page :dataList="form.supplementSuretyCorporateList" border :total="total">
            <template slot="tableCol">
              <el-table-column label="企业名称" align="center" prop="companyName" />
              <el-table-column label="统一社会信用代码" align="center" prop="creditCode" />
              <el-table-column label="联系地址" align="center" prop="contactAddr" />
              <el-table-column label="联系人" align="center" prop="contactPerson" />
              <el-table-column label="联系电话" align="center" prop="contactMobile" />
              <el-table-column label="与客户关系" align="center" prop="relation" />
              <el-table-column label="电子邮箱" align="center" prop="email" />
              <el-table-column label="传真" align="center" prop="fax" />
            </template>
          </table-page>
        </div>
      </div>

      <div class="box">
        <p class="title">交车信息</p>
        <div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="异地交车:">
                <span>{{ form.supplementDelivery.deliveryTypeStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="预计交车日期:">
                <span>{{ form.estimatedDeliveryTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 否 -->
          <el-row v-if="form.supplementDelivery.deliveryTypeStr == '否'">
            <el-col :span="12">
              <el-form-item label="交车/还车地点:">
                <span>{{ form.supplementDelivery.deliveryProvinceName }}{{ form.supplementDelivery.deliveryCityName }}{{ form.supplementDelivery.deliveryAreaName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:">
                <span>{{ form.supplementDelivery.deliveryAddr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是 -->
          <el-row v-if="form.supplementDelivery.deliveryTypeStr == '是'">
            <el-col :span="12">
              <el-form-item label="交车地点:">
                <span>{{ form.supplementDelivery.deliveryProvinceName }}{{ form.supplementDelivery.deliveryCityName }}{{ form.supplementDelivery.deliveryAreaName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:">
                <span>{{ form.supplementDelivery.deliveryAddr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是 -->
          <el-row v-if="form.supplementDelivery.deliveryTypeStr == '是'">
            <el-col :span="12">
              <el-form-item label="还车地点:">
                <span>{{ form.supplementDelivery.returnProvinceName }}{{ form.supplementDelivery.returnCityName }}{{ form.supplementDelivery.returnAreaName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:">
                <span>{{ form.supplementDelivery.returnAddr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是 -->
          <el-row v-if="form.supplementDelivery.deliveryTypeStr == '是'">
            <el-col :span="6">
              <el-form-item label="还车规则单价（元）:">
                <span>{{ form.supplementDelivery.offSiteReturnPrice }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是或者否 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="用车区域:">
                <span>{{ form.supplementDelivery.useArea }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件上传:">
                <ImageCommon :up-type="1" info="选择附件" :disabled="true" :limit="5" v-model="form.supplementDelivery.returnAccessory"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="box">
        <p class="title">其他信息</p>
        <div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="超里程单价(元/km):">
                <span>{{ format_thousand(form.supplementOther.overrangePrice) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="省内外埠施救保证金(元):">
                <span>{{ format_thousand(form.supplementOther.inProvinceSalvageDeposit) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="省外外埠施救保证金(元):">
                <span>{{ format_thousand(form.supplementOther.outsideProvinceSalvageDeposit) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="box">
        <p class="title">合同信息</p>
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同数目:">
                <span>{{ form.supplementContract.quantityDelivery }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="双方数目:">
                <span>{{ form.supplementContract.quantityDelivered }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同预计开始日期:">
                <span>{{ form.supplementContract.timeStart }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同预计结束日期:">
                <span>{{ form.supplementContract.timeFinish }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="新车交付前替车日租金(元/天/台):">
                <span>{{ form.supplementContract.dailyRentBeforeDelivery }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="替车是否计入合同期:">
                <span>{{ form.supplementContract.tenancyCalcInclusiveReplacementKey==1?'是':'否' }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="是否限制开票日:">
                <span>{{ form.supplementContract.limitInvoicingDaysKey==1?'是':'否' }}</span>
                <span v-if="form.supplementContract.limitInvoicingDaysKey==1">，每月的{{ form.supplementContract.billingDay }}日</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否限制租金支付日:">
                <span>{{ form.supplementContract.restrictedPaymentDayKey==1?'是':'否' }}</span>
                <span v-if="form.supplementContract.restrictedPaymentDayKey==1">，每月的{{ form.supplementContract.paymentDay }}日前支付租金</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="授权委托指定人:">
                <span>{{ form.supplementContract.authorizedUser }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授权委托指定人身份证号:">
                <span>{{ form.supplementContract.authorizedUserIdNo}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="合同是否体现租金支付表:">
                <span>{{ form.supplementContract.includesRentPaymentScheduleKey==1?'是':'否' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.supplementContract.includesRentPaymentScheduleKey==1">
              <el-form-item label="租金支付表车牌号:">
                <span>{{ form.supplementContract.includesRentPaymentScheduleKey==1?'是':'否' }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="form.supplementContract.includesRentPaymentScheduleKey==1">
            <el-col :span="12">
              <el-form-item label="租金支付表车架号:">
                <span>{{ form.supplementContract.paymentScheduleCarVinNo}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.supplementContract.includesRentPaymentScheduleKey==1">
              <el-form-item label="租金支付表租金合计:">
                <span>{{ format_thousand(form.supplementContract.paymentScheduleTotalRent)}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table v-if="form.supplementContract.includesRentPaymentScheduleKey==1" :data="form.supplementContract.paymentScheduleList">
            <el-table-column label="租金期数" align="center" prop="periods" />
            <el-table-column label="支付日期" align="center" prop="paymentDate" />
            <el-table-column label="月租金(RMB,含税)" align="center" prop="rent">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.rent) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件:">
                <ImageCommon :up-type="1" info="选择附件" :limit="10" v-model="form.supplementContract.accessory" :disabled="true"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注:">
                <span>{{ form.remark }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="box">
        <p class="title">{{ carSourceType == '2' ? '车辆信息' : '车型信息' }}</p>
        <div>
          <table-page :dataList="form.orderPlanList" border :total="total">
            <!-- 普通列插槽 -->
            <template slot="tableCol" v-if="carSourceType == '2'">
              <!-- <el-table-column label="车牌号" align="center" prop="carPlateNo" /> -->
              <el-table-column label="车牌号" align="center">
                <template slot-scope="scope">
                  <span style="color: #3280fc; cursor: pointer" @click="digLogDetail(scope.row)"> {{ scope.row.carPlateNo }}</span>
                </template>
              </el-table-column>
              <el-table-column label="车架号" align="center" prop="carVinNo" min-width="150px" show-overflow-tooltip />
              <el-table-column label="品牌" align="center" prop="carBrandName" min-width="150px" show-overflow-tooltip />
              <el-table-column label="车系" align="center" prop="carSeriesName" />
              <el-table-column label="车型" align="center" prop="carModelName" min-width="350px" show-overflow-tooltip />
              <el-table-column label="车辆状态" align="center" prop="carStatusStr" />
              <el-table-column label="所属城市" align="center" prop="carOperateCityVal" />
              <el-table-column label="当前里程/km" align="center" prop="carMileage" />
              <el-table-column label="合同保证金(台)" align="center" prop="contractCashdeposit" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.contractCashdeposit) }}{{(scope.row.contractCashdeposit^0) > 0 ? [5,8,3,4].includes(form.orderStatus^0) ?'(已收款)':'(未收款)' : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="违章保证金(台)" align="center" prop="violationCashdeposit" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.violationCashdeposit) }}{{(scope.row.violationCashdeposit^0) > 0 ? [5,8,3,4].includes(form.orderStatus^0) ?'(已收款)':'(未收款)' : ''}}</span>
                </template>
              </el-table-column>
            </template>
            <template slot="tableCol" v-else>
              <!-- <el-table-column label="品牌" align="center" prop="carBrandName" /> -->
              <el-table-column label="品牌" align="center">
                <template slot-scope="scope">
                  <span style="color: #3280fc; cursor: pointer" @click="digLogDetail(scope.row)"> {{ scope.row.carBrandName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="车系" align="center" prop="carSeriesName" />
              <el-table-column label="车型" align="center" prop="carModelName" min-width="350px" show-overflow-tooltip />
              <el-table-column label="能源类型" align="center" prop="carPowerTypeStr" />
              <el-table-column label="颜色" align="center" prop="appearanceColor" />
              <el-table-column label="每期租金(元)" align="center" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.planRent) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="租期(月)" align="center">
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.planTenancyTypeStr) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加装费(元)" align="center" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.attachedDecorationAmount) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="登记性质" align="center" prop="operationTypeStr" />

              <el-table-column label="合同保证金(台)" align="center" prop="contractCashdeposit" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.contractCashdeposit) }}{{(scope.row.contractCashdeposit^0) > 0 ? [5,8,3,4].includes(form.orderStatus^0) ?'(已收款)':'(未收款)' : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="违章保证金(台)" align="center" prop="violationCashdeposit" min-width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ format_thousand(scope.row.violationCashdeposit) }}{{(scope.row.violationCashdeposit^0) > 0 ? [5,8,3,4].includes(form.orderStatus^0) ?'(已收款)':'(未收款)' : ''}}</span>
                </template>
              </el-table-column>

              <el-table-column label="批过数量" align="center" prop="quantityApproved" />
              <el-table-column label="未下单数量" align="center" prop="quantityUndelivered" min-width="150px" show-overflow-tooltip />
              <el-table-column label="下单数量" align="center" prop="quantityOrder" />
            </template>
          </table-page>
          <div style="margin-top: 20px;display: flex;justify-content: start; align-items: center;flex-wrap: wrap;">
            <div style="min-width: 300px;">
              <span style="font-size: 14px; color: #606266">合同保证金:</span>
              <span style="margin-left: 10px">{{ format_thousand(form.contractCashdeposit) }}</span>
            </div>
            <div style="min-width: 300px;">
              <span style="font-size: 14px; color: #606266">违章保证金:</span>
              <span style="margin-left: 10px">{{ format_thousand(form.violationCashdeposit) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <el-dialog title="信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <Details v-model="formData" state="readonly" type="preview"></Details>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as apis from '@/api/quota/forecast/edit/api.js'
import Details from '@/views/quota/forecast/chunk/details/index.vue'
export default {
  name: 'orderDetailCommon',
  props: {
    value: {
      type: Object,
      default: {},
    },
    carSourceType: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', { ...target, [key]: value })
            return true
          },
        })
        return proxy
      },
    },
  },
  data() {
    return {
      formData: {},
      total: 0,
      dialogVisible: false,
    }
  },
  components: {
    Details,
  },
  methods: {
    initData(calcSchemeId) {
      apis
        ?.Details(calcSchemeId)
        .then((res) => {
          if (res.code == 200) {
            this.formData = res.data
          }
        })
        .finally(() => { })
    },
    handleClose() {
      this.dialogVisible = false
    },
    digLogDetail(row) {
      this.dialogVisible = true
      this.initData(row.calcSchemeId)
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  .box {
    width: 100%;
    .title {
      border-left: 3px solid #3280fc;
      padding-left: 5px;
      box-sizing: border-box;
    }
  }
}
</style>
